<template>
  <div class="layout-container" :class="{ 'dark-mode': userStore.isDarkMode }">
    <!-- 顶部导航 -->
    <div class="layout-header">
      <div class="header-left">
        <a-button type="text" @click="toggleCollapse">
          <template #icon>
            <icon-menu-fold v-if="collapsed" />
            <icon-menu-unfold v-else />
          </template>
        </a-button>
        <div class="breadcrumb">
          <a-breadcrumb>
            <a-breadcrumb-item>首页</a-breadcrumb-item>
            <a-breadcrumb-item>{{ currentRoute }}</a-breadcrumb-item>
          </a-breadcrumb>
        </div>
      </div>
      <div class="header-right">
        <!-- 系统设置按钮 -->
        <a-dropdown trigger="click">
          <a-button type="text" shape="circle">
            <template #icon>
              <icon-settings />
            </template>
          </a-button>
          <template #content>
            <a-doption @click="userStore.toggleTheme">
              切换主题
              <template #icon>
                <icon-moon-fill v-if="userStore.isDarkMode" />
                <icon-sun-fill v-else />
              </template>
            </a-doption>
            <a-doption>
              系统设置
              <template #icon>
                <icon-settings />
              </template>
            </a-doption>
          </template>
        </a-dropdown>
        
        <!-- 用户信息 -->
        <a-dropdown trigger="click">
          <a-avatar class="avatar">
            <template #icon><icon-user /></template>
          </a-avatar>
          <template #content>
            <a-doption>
              {{ userStore.username }}
              <template #icon>
                <icon-user />
              </template>
            </a-doption>
            <a-doption>
              个人中心
              <template #icon>
                <icon-user-add />
              </template>
            </a-doption>
            <a-divider style="margin: 0" />
            <a-doption @click="handleLogout">
              退出登录
              <template #icon>
                <icon-export />
              </template>
            </a-doption>
          </template>
        </a-dropdown>
      </div>
    </div>
    
    <!-- 侧边菜单和内容区域 -->
    <div class="layout-content">
      <a-layout style="height: 100%">
        <!-- 侧边菜单 -->
        <a-layout-sider
          :collapsed="collapsed"
          collapsible
          :width="220"
          hide-trigger
          breakpoint="xl"
          :style="{ height: '100%' }"
        >
          <!-- 系统 Logo 和名称 -->
          <div class="layout-logo">
            <img class="logo" src="../assets/logo/logo.png" alt="Logo" />
            <h1 v-if="!collapsed" class="system-name">淘票票系统</h1>
          </div>
          <!-- 菜单 -->
          <a-menu
            :selected-keys="[activeMenu]"
            :default-open-keys="['1']"
            :style="{ width: '100%' }"
            @menu-item-click="onMenuItemClick"
          >
            <a-menu-item key="home">
              <template #icon><icon-home /></template>
              首页
            </a-menu-item>
            <a-sub-menu key="1">
              <template #icon><icon-film /></template>
              <template #title>电影管理</template>
              <a-menu-item key="movies">电影列表</a-menu-item>
              <a-menu-item key="categories">电影分类</a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="2">
              <template #icon><icon-calendar /></template>
              <template #title>放映管理</template>
              <a-menu-item key="schedule">排片管理</a-menu-item>
              <a-menu-item key="halls">影厅管理</a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="3">
              <template #icon><icon-ticket /></template>
              <template #title>订单管理</template>
              <a-menu-item key="orders">订单列表</a-menu-item>
              <a-menu-item key="tickets">票务管理</a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="4">
              <template #icon><icon-user-group /></template>
              <template #title>用户管理</template>
              <a-menu-item key="users">用户列表</a-menu-item>
              <a-menu-item key="roles">角色管理</a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="5">
              <template #icon><icon-bar-chart /></template>
              <template #title>统计分析</template>
              <a-menu-item key="sales">票房统计</a-menu-item>
              <a-menu-item key="user-analysis">用户分析</a-menu-item>
            </a-sub-menu>
          </a-menu>
        </a-layout-sider>
        <!-- 主内容区域 -->
        <a-layout-content class="layout-main-content">
          <div class="content-wrapper">
            <router-view v-slot="{ Component }">
              <transition name="fade" mode="out-in">
                <component :is="Component" />
              </transition>
            </router-view>
          </div>
          <!-- 底部版权信息 -->
          <a-layout-footer class="layout-footer">
            <div class="footer-text">淘票票系统 &copy; {{ new Date().getFullYear() }} 版权所有</div>
          </a-layout-footer>
        </a-layout-content>
      </a-layout>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { Modal } from '@arco-design/web-vue';
import { useUserStore } from '../store/user';

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();

// 侧边栏折叠状态
const collapsed = ref(false);
const toggleCollapse = () => {
  collapsed.value = !collapsed.value;
};

// 当前激活的菜单
const activeMenu = computed(() => route.name?.toLowerCase() || 'home');
const currentRoute = computed(() => route.meta?.title || '首页');

// 菜单点击处理
const onMenuItemClick = (key) => {
  if (key === 'home') {
    router.push('/home');
  } else {
    // 显示开发中提示
    Modal.info({
      title: '功能开发中',
      content: '该功能正在开发中，敬请期待！',
    });
  }
};

// 退出登录
const handleLogout = () => {
  Modal.confirm({
    title: '确认退出',
    content: '确定要退出登录吗？',
    onOk: () => {
      userStore.logout();
      router.push('/login');
    },
  });
};

onMounted(() => {
  // 初始化应用主题
  if (userStore.isDarkMode) {
    document.body.setAttribute('arco-theme', 'dark');
  }
});
</script>

<style scoped>
.layout-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-1);
}

.layout-header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  z-index: 1;
  background-color: var(--color-bg-2);
}

.header-left, .header-right {
  display: flex;
  align-items: center;
}

.header-right {
  gap: 16px;
}

.avatar {
  cursor: pointer;
  margin-left: 8px;
  background-color: var(--color-primary-light-3);
  color: var(--color-primary-6);
}

.breadcrumb {
  margin-left: 16px;
}

.layout-content {
  flex: 1;
  overflow: hidden;
}

.layout-logo {
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  overflow: hidden;
}

.logo {
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

.system-name {
  color: var(--color-text-1);
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
  margin: 0;
}

.layout-main-content {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.content-wrapper {
  padding: 20px;
  flex: 1;
  min-height: 0;
}

.layout-footer {
  text-align: center;
  padding: 12px 20px;
  background-color: transparent;
  color: var(--color-text-3);
}

.footer-text {
  font-size: 14px;
}

/* 暗黑模式 */
.dark-mode {
  color-scheme: dark;
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style> 